<template>
  <BasicDrawer
    class="wyf-drawer"
    v-bind="$attrs"
    @register="registerBaseDrawer"
    title="入住详情"
    :width="adaptiveWidth"
    :showFooter="showFooter"
    :loading="loading"
    destroyOnClose
  >
    <div>
      <div class="wyf-form-item-box" v-for="item in detailSchema" :key="item.field">
        <template v-if="item.slot">
          <div class="wyf-form-item-title">{{ item.field }}</div>
        </template>
        <template v-else>
          <div class="wyf-form-item-label">{{ item.label }}：</div>
          <div class="wyf-form-item-text">
            <template v-if="item.render">
              <span :class="item?.color && item?.color(info[item.field])">{{ item.render(info[item.field]) }} </span></template
            >
            <template v-else> {{ info[item.field] || '' }} </template>
          </div>
        </template>
      </div>
      <div class="wyf-form-item-box">
        <div class="wyf-form-item-title">住客信息</div>
      </div>
      <div class="wyf-form-item-box personalization-box" v-for="(item, index) in info?.tenantsList || []" :key="item.id">
        <div class="wyf-form-item-label personalization-label">住客{{ index + 1 }}：</div>
        <div class="wyf-form-item-text wyf-flex">
          <div class="width-155">
            <div>{{ item.xm }}</div>
            <div>{{ item.zjhm }}</div>
            <div>{{ item.lxdh }}</div>
            <div class="text-green" v-if="item.rzbz == 1">实名认证</div>
            <div class="text-waring" v-else-if="item.rzbz == 4">实人认证未通过</div>
            <div class="text-waring" v-else-if="item.rzbz == 2">实名认证未通过</div>
            <div class="text-green" v-else-if="item.rzbz == 3">实人认证</div>
            <div class="text-red" v-else-if="item.rzbz == 5">未认证</div>
          </div>
          <a-image
            :width="100"
            :height="100"
            :src="item.headPortraitUrl || 'https://www.antdv.com/#error'"
            fallback=""
          />
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { defineComponent, ref, useAttrs } from 'vue';
  import { detailSchema } from '../index.data';
  import { BasicDrawer, useDrawerInner, useDrawer } from '/@/components/Drawer';
  import { detail } from '../index.api';
  import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  // const attrs = useAttrs();
  const rowId = ref('');
  const showFooter = ref(true);
  const isUpdate = ref(true);
  const loading = ref(false); //审核 pending
  const info: any = ref({});

  //注册drawer
  const [registerDrawer, { openDrawer }] = useDrawer();
  //注册drawer
  const [registerBaseDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    showFooter.value = data?.showFooter ?? true;
    setDrawerProps({ confirmLoading: true, showFooter: showFooter.value });
    rowId.value = data.record.id;
    loading.value = true;
    let res = await detail({ id: rowId.value });
    isUpdate.value = !!data?.isUpdate;
    info.value = res;
    setDrawerProps({ confirmLoading: false });
    loading.value = false;
  });
  /**
   * 详情
   */
  async function handleDetail(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
    });
  }
  const { adaptiveWidth } = useDrawerAdaptiveWidth();
</script>
<style lang="less" scoped>
  .width-155 {
    width: 155px;
  }
  .personalization-label {
    width: auto;
    min-width: auto;
    text-align: left;
  }
</style>
